import { BaseView, addDomEvents, BaseViewClass } from '../base';
import { first, empty, display } from 'mvdom';
import { StatsIncomeView } from './StatsIncomeView';
import { StatsDueDateView } from './StatsDueDateView';
import { StatsPaymentView } from './StatsPaymentView';


const defaultType = "Payment";

let typeToView: { [name: string]: BaseViewClass } = {
	"LeftIncome": StatsIncomeView,
	"DueDate": StatsDueDateView,
	"Payment": StatsPaymentView
};

export class StatsView extends BaseView {

	protected get main() { return first(this.el, '.StatsView-section')! };
	//#region    ---------- View Events ---------- 
	events = addDomEvents(this.events, {
		"change; select[name='statsType']": (evt: any) => {
			const targetEl = evt.selectTarget;
			const type = targetEl.value;
			this.refresh(type);
		}
	});
	//#endregion ---------- /View Events ----------

	async postDisplay() {
		this.refresh();
	}

	private refresh(type?: string) {
		type = type || defaultType;
		// update this view/content only if the path has changed
		const subViewClass = typeToView[type];
		if (subViewClass) {
			empty(this.main);
			display(new subViewClass, this.main, null, 'empty');
		} else {
			console.log(`ERROR - No view found for type ${type}`);
		}

	}
}

